<template>
  <div class="table">
    <el-row>
      <el-col :span="18"><el-button type="success" round @click="addDetails">{{ addInfo }}</el-button></el-col>
      <el-col :span="6">
        <slot name="importXls" />
      </el-col>
    </el-row>
    <el-row>
      <el-table ref="singleTable" border stripe :data="dataList" highlight-current-row center>
        <el-table-column v-for="(item, index) in headerList" :key="index" align="center" :prop="Object.keys(item)[0]" :label="Object.values(item)[0]" :width="Object.keys(item)[0] === 'index' ? 70 : Object.keys(item)[0] === 'operation' ? 230 : 170" :type="Object.keys(item)[0] === 'index' ? 'index' : ''" :fixed="Object.keys(item)[0] === 'operation' ? 'right' : false" height="45">
          <template v-if="Object.keys(item)[0] === 'operation'" v-slot="{row}">
            <slot name="operation" :row="row" />
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AllTable',
  props: {
    addInfo: {
      type: String,
      default: '新增'
    },
    // 数据表
    dataList: {
      type: Array,
      default: () => []
    },
    // 表头列表
    headerList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    addDetails() {}
  }
}
</script>

<style lang="scss" scoped>
.el-button--success {
  height: 40px;
  background-color: #00be76;
  margin-left: 10px;
}
.el-row {
  margin-bottom: 20px;
}
.el-table__header {
  background-color: #fff7e2;
}
.el-table th,
.el-table td {
  padding: 8px;
}
</style>
